<template>
  <div class="shop">
    <el-table
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="title" label="优惠券名字"></el-table-column>
      <el-table-column prop="title" label="优惠券金额"></el-table-column>
      <el-table-column prop="title" label="用户昵称"></el-table-column>
      <el-table-column prop="username" label="用户账号"></el-table-column>
      <!-- <el-table-column  label="是否小店会员">
         <template slot-scope="scope">
            <p v-if='scope.row.is_vip == 1'>是</p>
            <p v-if='scope.row.is_vip == 0'>否</p>
         </template>
      </el-table-column> -->
      <el-table-column prop="created_at" width='150' label="领取时间/使用时间">
        <template slot-scope="scope">
          {{scope.row.created_at}}/{{scope.row.created_at}}
         </template>
      </el-table-column>
    
      <el-table-column  label="订单金额/实付金额" width='140'>
        <template slot-scope="scope">
         {{scope.row.total_amount}}/{{scope.row.actual_amount}}
        </template>
      </el-table-column>
      <!-- 
      <el-table-column  label="会员折扣">
         <template slot-scope="scope">
           <p>{{scope.row.vip_discount}}%</p>
         </template>
      </el-table-column>
      <el-table-column label="红包折扣">
        <template slot-scope="scope">
           <p>{{scope.row.red_packet_discount}}%</p>
         </template>
      </el-table-column> -->
    </el-table>

       <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
// import { activityPreferentialDetailList } from "@/api/finance";
export default {
  data() {
    return {
      tableData: [],
      id: "",
      page:1,
      size:20,
      total:0,
    };
  },
  mounted() {
    this.id = this.$route.query.cid;
    if (!this.id) {
      this.id = "";
    }

    this.preferentialDetailList()
  },
  methods: {
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    handleSizeChange(val) {
      this.size = val;
      this.pageChange(1);
    },
    pageChange(page) {
      this.page = page;
      this.preferentialDetailList();
    },
    async preferentialDetailList() {
      let res = await activityPreferentialDetailList({id:this.id,page:this.page,size:this.size})
      if(res.code === 10000){
        this.tableData = res.data.data
        this.total = res.data.total
      }else{
         this.$message.error(res.message)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  position: relative;
}
p {
  display: inline;
  margin-left: 5px;
}
.lookup {
  color: #f4222d;
  cursor: pointer;
}
.pagination{
  float: right;
}
</style>
